<template>
  <div class="featured-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 课程卡片 -->
        <template v-if="type === 'course' || type === 'all'">
          <div class="course-card" v-for="item in courseList" :key="item.id" @click="navigateToCourse(item)">
            <van-image :src="item.cover" radius="4" />
            <div class="course-info">
              <div class="title">{{ item.title }}</div>
              <div class="desc">{{ item.description }}</div>
              <div class="stats">
                <span>{{ item.studentCount }}人学习</span>
                <van-rate v-model="item.rating" readonly allow-half size="12" />
              </div>
            </div>
          </div>
        </template>

        <!-- 文章卡片 -->
        <template v-if="type === 'article' || type === 'all'">
          <div class="article-card" v-for="item in articleList" :key="item.id" @click="navigateToArticle(item)">
            <div class="article-info">
              <div class="title">{{ item.title }}</div>
              <div class="desc">{{ item.summary }}</div>
              <div class="meta">
                <span>{{ item.author }}</span>
                <span>{{ item.readCount }}阅读</span>
                <span>{{ item.likeCount }}点赞</span>
              </div>
            </div>
            <van-image v-if="item.cover" :src="item.cover" radius="4" />
          </div>
        </template>

        <!-- 视频卡片 -->
        <template v-if="type === 'video' || type === 'all'">
          <div class="video-card" v-for="item in videoList" :key="item.id" @click="navigateToVideo(item)">
            <div class="video-cover">
              <van-image :src="item.cover" radius="4" />
              <div class="duration">{{ formatDuration(item.duration) }}</div>
            </div>
            <div class="video-info">
              <div class="title">{{ item.title }}</div>
              <div class="meta">
                <span>{{ item.viewCount }}播放</span>
                <span>{{ item.likeCount }}点赞</span>
              </div>
            </div>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const props = defineProps({
  type: {
    type: String,
    default: 'all'
  }
})

const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const courseList = ref([])
const articleList = ref([])
const videoList = ref([])

// 模拟数据
const mockData = {
  courses: [
    {
      id: 1,
      title: 'Vue.js 实战教程',
      description: '从入门到精通的Vue.js课程',
      cover: 'https://picsum.photos/200/100',
      studentCount: 1234,
      rating: 4.5
    },
    {
      id: 2,
      title: 'React 开发实践',
      description: '企业级React应用开发指南',
      cover: 'https://picsum.photos/200/100',
      studentCount: 2345,
      rating: 4.8
    }
  ],
  articles: [
    {
      id: 1,
      title: '前端开发最佳实践',
      summary: '本文介绍了前端开发中的一些重要概念和技巧...',
      author: '张三',
      readCount: 1000,
      likeCount: 50,
      cover: 'https://picsum.photos/100/100'
    },
    {
      id: 2,
      title: '移动端适配方案详解',
      summary: '详细讲解移动端开发中的各种适配问题...',
      author: '李四',
      readCount: 800,
      likeCount: 30,
      cover: 'https://picsum.photos/100/100'
    }
  ],
  videos: [
    {
      id: 1,
      title: 'TypeScript入门教程',
      cover: 'https://picsum.photos/200/100',
      duration: 1800,
      viewCount: 500,
      likeCount: 20
    },
    {
      id: 2,
      title: 'Node.js实战指南',
      cover: 'https://picsum.photos/200/100',
      duration: 2400,
      viewCount: 300,
      likeCount: 15
    }
  ]
}

const formatDuration = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

const onLoad = () => {
  // 模拟加载数据
  setTimeout(() => {
    if (props.type === 'course' || props.type === 'all') {
      courseList.value = [...courseList.value, ...mockData.courses]
    }
    if (props.type === 'article' || props.type === 'all') {
      articleList.value = [...articleList.value, ...mockData.articles]
    }
    if (props.type === 'video' || props.type === 'all') {
      videoList.value = [...videoList.value, ...mockData.videos]
    }
    
    loading.value = false
    finished.value = true // 模拟数据加载完成
  }, 1000)
}

const onRefresh = () => {
  // 重置数据
  finished.value = false
  courseList.value = []
  articleList.value = []
  videoList.value = []
  
  // 重新加载数据
  onLoad()
  refreshing.value = false
}

const navigateToCourse = (course) => {
  router.push(`/course/${course.id}`)
}

const navigateToArticle = (article) => {
  router.push(`/article/${article.id}`)
}

const navigateToVideo = (video) => {
  router.push(`/video/${video.id}`)
}

onMounted(() => {
  onLoad()
})
</script>

<style lang="scss" scoped>
.featured-list {
  padding: 12px;

  .course-card {
    margin-bottom: 16px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);

    .van-image {
      width: 100%;
      height: 150px;
    }

    .course-info {
      padding: 12px;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #323233;
        margin-bottom: 8px;
      }

      .desc {
        font-size: 14px;
        color: #969799;
        margin-bottom: 8px;
        line-height: 1.5;
      }

      .stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #969799;
      }
    }
  }

  .article-card {
    display: flex;
    margin-bottom: 16px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);

    .article-info {
      flex: 1;
      margin-right: 12px;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #323233;
        margin-bottom: 8px;
      }

      .desc {
        font-size: 14px;
        color: #969799;
        margin-bottom: 8px;
        line-height: 1.5;
      }

      .meta {
        font-size: 12px;
        color: #969799;

        span {
          margin-right: 12px;
        }
      }
    }

    .van-image {
      width: 100px;
      height: 100px;
    }
  }

  .video-card {
    margin-bottom: 16px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);

    .video-cover {
      position: relative;

      .van-image {
        width: 100%;
        height: 200px;
      }

      .duration {
        position: absolute;
        right: 8px;
        bottom: 8px;
        padding: 2px 6px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
      }
    }

    .video-info {
      padding: 12px;

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #323233;
        margin-bottom: 8px;
      }

      .meta {
        font-size: 12px;
        color: #969799;

        span {
          margin-right: 12px;
        }
      }
    }
  }
}
</style>
